<!--新增/编辑文件-->
<template>
  <el-dialog v-loading.lock="loading" class="base-dialog" :custom-class="'panna-dialog_small'" :append-to-body="true"
    destroy-on-close :title="title" align="center" :close-on-click-modal="false" :visible.sync="dialogVisible">
    <p slot="title">{{ title }}</p>
    <el-form ref="formData" class :rules="formRules" :model="formData" label-width="100px">
      <el-form-item label="文件名称" prop="name">
        <el-input v-model="formData.name" :disabled="readOnly" placeholder="请输入文件名称" />
      </el-form-item>
      <el-form-item label="文件类型" prop="type">
        <el-select v-model="formData.type" :disabled="readOnly" placeholder="请选择文件类型">
          <el-option v-for="item in fileTypeList" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择上级" prop="parentId">
        <BaseTreeSelect v-model="formData.parentId" :tree-data="folderList" :disabled="readOnly"
          placeholder="请选择上级" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" :disabled="readOnly" type="textarea" :rows="2" placeholder="备注"
          maxlength="200" show-word-limit />
      </el-form-item>
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button v-if="!readOnly" v-loading="submitLoad" type="primary" @click="onSubmit">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { create, update, getFolder, getFolderList } from "../../../api/Document/DocumentFolder.js";
import { getDictListByCode } from "../../../api/SystemDict";
import { formatData } from '@/utils/index'
export default {
  name: "DocumentFloder",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      id: 0,
      title: "",
      loading: false,
      dialogVisible: false,
      submitLoad: false,
      formLabelWidth: "120px",
      folderList: [],
      fileTypeList: [],
      formLoading: false,
      parentId: 0,

      formData: {
        id: 0,
        name: "",
        type: "",
        parentId: 0,
        createrId: 0,
        remark: "",
      },
      initData: {
        id: 0,
        name: undefined,
        type: undefined,
        parentId: 0,
        createrId: 0,
        remark: undefined,
      },
      formRules: {
        name: [{ required: true, message: "请输入文件名称", trigger: 'blur' }],
        type: [{ required: true, message: "请选择文件类型", trigger: 'blur' }],
      },
      initErrorMsg: {
      },
      errorMsg: {
      },
    };
  },
  watch: {
    dialogVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
    dialogFormVisible: {
      handler(val) {
        this.dialogVisible = val;
        if (val) {
          console.log(this.formData);
          this.init();
        }
      }
    }
  },
  methods: {
    // 初始化
    async init() {
      var that = this;
      this.title = this.readOnly
        ? "查看文件"
        : this.editId
          ? "编辑文件"
          : "新增文件";

      // 获取项目数据
      var res = await getFolderList().catch(
        () => {
          this.formLoading = false;
        }
      );
      if (res.data && res.data.length) {
        that.folderList = formatData(res.data, { label: "name" });
      }
      getDictListByCode({ configKey: "DocumentFileType" }).then((res) => {
        if (res.data != null && res.data.length > 0 && res.data[0].value != null) {
          this.fileTypeList = JSON.parse(res.data[0].value);
        }
      })
      if (this.editId) {
        getFolder({ id: this.editId }).then((res) => {
          console.log(res);
          that.formData = res.data;
          this.$set(this.formData, "parentId", res.data.parentId);
        });
      }
    },
    onSubmit() {
      var _this = this;
      _this.$refs.formData.validate((valid) => {
        if (valid) {
          _this.loading = true;
          _this.errorMsg = _this.Helper.deepCopy(_this.initErrorMsg);
          var tmpFormData = _this.Helper.simpleDeepCopy(_this.formData);
          var requestData = JSON.parse(JSON.stringify(tmpFormData));
          if (this.formData.id <= 0) {
            create(requestData)
              .then((res) => {
                if (res.code === 200) {
                  this.closeDialog();
                } else {
                  this.showValidateMsgCheck(res);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            update(requestData)
              .then((res) => {
                if (res.code === 200) {
                  this.closeDialog();
                } else {
                  this.showValidateMsgCheck(res);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    // 操作成功回调用
    SuccessfulOperation() {
      this.submitLoad = false;
      this.$message.success("操作成功");
      this.$emit("success");
    },
    cancel() {
      this.dialogVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.formData = this.$options.data().formData
      this.cancel();
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("name", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("type", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("remark", this.errorMsg, res.msg);
      }
    },
  },
};
</script>

<style lang="scss">
.Warehouse-dialog {
  .el-dialog__body {
    padding: 40px 60px;
  }

  .relay-only-value {
    margin-bottom: 2px;
  }
}
</style>
